<template>
  <div class="follow-list">
    <a-list
      item-layout="horizontal"
      :data-source="data"
      :loading="loading"
      bordered
      size="large"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta>
            <template #avatar>
              <a :href="`/user/${item.id}`">
                <a-avatar :src="getMinioUrl(item.avatar)" />
              </a>
            </template>
            <template #title>
              <a :href="`/user/${item.id}`">{{ item.username }}</a>
            </template>
            <template #description>
              {{ item.signature || "暂无个性签名" }}
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { getFollowList, getFanList } from "@/api/user";
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { getMinioUrl } from "@/utils/minio";

interface DataItem {
  id: number;
  username: string;
  avatar: string;
  signature: string;
}
const data = ref<DataItem[]>([]);
const loading = ref<boolean>(true);

const fetchFollowList = async () => {
  try {
    const res = await getFollowList();
    if (res.data.code === 200) {
      data.value = res.data.data;
    } else {
      message.error(res.data.message || "获取关注列表失败");
    }
  } catch (error) {
    message.error("获取关注列表失败");
  } finally {
    loading.value = false;
  }
};

onMounted(async () => {
  try {
    await fetchFollowList();
  } catch (error) {
    console.error("获取关注列表失败:", error);
    message.error("获取关注列表失败");
  }
});
</script>

<style scoped>
.follow-list {
  max-width: 800px;
  margin: 0 auto;
}

:deep(.ant-list) {
  font-size: 16px; /* 整体字体增大 */
}

:deep(.ant-list-item) {
  padding: 24px 32px; /* 增加内边距，让每一项更高 */
  min-height: 100px; /* 设置最小高度 */
}

:deep(.ant-list-item-meta-avatar .ant-avatar) {
  width: 42px;
  height: 42px;
}

:deep(.ant-list-item-meta-title a) {
  font-size: 16px;
  font-weight: bold;
}

:deep(.ant-list-item-meta-description) {
  font-size: 16px;
}
</style>
